<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">

</head>
<body>
	<!-- 面板 -->
	<div class="panel panel-default">
		<!-- 面板头-->
		<div class="panel-heading">
			<i class="glyphicon glyphicon-th"></i>数据列表
		</div>
		<!-- 面板体-->
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">
				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">查询条件</div>
						<input class="form-control has-success" type="text"
							placeholder="请输入查询条件">
					</div>
				</div>
				<button type="button" class="btn btn-info">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
			<form method="post">
				<button type="button" class="btn btn-danger"
					style="float: right; margin-left: 10px;" id="del_many_btn">
					<i class=" glyphicon glyphicon-trash"></i> 删除
				</button>
				<a class="btn btn-primary" style="float: right;" data-toggle="modal"
					data-target="#addModal"> <i class="glyphicon glyphicon-plus"></i>
					新增
				</a> <br>
				<hr style="clear: both;">

				<!-- 响应式表格 -->
				<div class="table-responsive">
					<table class=".table table-striped table-bordered table-hover"
						style="margin: 20px auto; width: 80%" id="roleListTable">
						<thead>
							<tr>
								<th>
									<div class="checkbox">
										<label><input type="checkbox">全选</label>
									</div>
								</th>
								<th>角色名称</th>
								<th>备注</th>
								<th width="120px">操作</th>
							</tr>
						</thead>

						<tbody>

						</tbody>

						<tfoot>
							<tr>
								<td colspan="6" align="center">
									<ul class="pagination">
										<li class="disabled"><a href="#">上一页</a></li>
										<li class="active"><a href="#">1 <span
												class="sr-only">(current)</span></a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
										<li><a href="#">下一页</a></li>
									</ul>
								</td>
							</tr>

						</tfoot>
					</table>
				</div>

			</form>
		</div>
	</div>


	<!-- 增加开始 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">角色增加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="add_role_form">
						<div class="form-group">
							<label for="rolename" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="rolename"
									placeholder="请输入角色名称" name="rolename">
							</div>
						</div>
						<div class="form-group">
							<label for="remark" class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="remark"
									placeholder="备注" name="remark">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="add_role_btn">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<!-- 增加结束 -->


	<script type="text/javascript"
		src="${pageContext.request.contextPath}/static/js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		//ready事件触发
		$(function() {
			loadRoleData();
			deleteManyRole();
			addRole();
		});

		//加载页面是发送ajax，获得role的数据集合，一json的类型处理，遍历拼接到表格中
		function loadRoleData() {
			$.ajax({
				url : "list",
				type : "post",
				dataType : "json",
				async : true,
				error : function() {},
				success : function(data) {
					var str = "";
					for (var i = 0; i < data.length; i++) {
						str = str + "<tr>";
						str = str + "<td><input type='checkbox' name='rid' value='"+data[i].id+"'/>"+ data[i].id + "</td>";
						str = str + "<td>" + data[i].rolename + "</td>";
						str = str + "<td>" + data[i].remark + "</td>";
						str = str + "<td>";
						str = str + "<button class='btn btn-danger btn-xs' name='del_role_btn'>删除</button>";
						str = str + "<button class='btn btn-info btn-xs' name='update_role_btn'>修改</button>";
						str = str + "</td>";
						str = str + "</tr>";
					}
					//将遍历拼接的role表放到roleListTable的tbody中
					$("#roleListTable tbody").html(str);
					deleteRole();
					deleteManyRole();
				}

			});

		}

		//单个删除按钮，触发删除函数
		function deleteRole() {
			$("[name=del_role_btn]").click(function() {
						var roleid = $(this).parents("tr").children("td").first().text();
						alert(roleid);
						$.ajax({
							url : "deleteOne",
							type : "post",
							async : true,
							data : {
								"id" : roleid
							},
							error : function() {
							},
							success : function(data) {
								alert(data);
								loadRoleData();
							}

						});
					});
		}

		//批量删除
		function deleteManyRole() {
			$("#del_many_btn").click(function() {
				var ids = [];
				$(":checkbox[name=rid]:checked").each(function() {
					ids.push($(this).val());
				});
				$.ajax({
					url : "deleteMany",
					type : "post",
					async : true,
					data : {
						"ids" : ids.join(",")
					},
					error : function() {
					},
					success : function(data) {
						loadRoleData();
					}

				});

			});
		}

		function addRole() {

			$("#add_role_btn").click(function() {
				$.ajax({
					url : "addOne",
					type : "post",
					async : true,
					data : $("#add_role_form").serialize(),
					error : function() {
					},
					success : function(data) {
						$('#addModal').modal('hide');
						loadRoleData();
					}
				});
			});
		}
		
		 
		
	</script>

</body>
</html>